<template>
	<view>
		<view class="page">
			<u-form :model="form" ref="uForm">
				<u-form-item class="from" label="密码" prop="password">
					<u-input v-model="form.password" placeholder="请输入密码" />
				</u-form-item>

				<u-form-item class="from" label-width="140" label="确认密码" prop="surePassword">
					<u-input v-model="form.surePassword" placeholder="请输入密码" />
				</u-form-item>
				<view class="pwd-cont">密码长度8-12位，须包含数字、字母、符号至少2 种或以上元素</view>
			</u-form>
			<view class="button-big">
				<view class="button" @click="submit">确认</view>
			</view>
			<!-- <view class="phone-cont">
				<view class="number">+86</view>
				<view class="phone-number">请输入手机号</view>
			</view>
			<view class="phone-cont">
				<view class="phone-number">请输入验证码</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					password: '',
					surePassword: '',
					mobile: uni.getStorageSync('rawData').userTel
				},
				rules: {
					password: [{
							required: true,
							message: '请输入密码',
							// 可以单个或者同时写两个触发验证方式
							trigger: ['change', 'blur'],
						},
						// 正则判断为字母或数字
						{
							pattern: /(?![A-Z]*$)(?![a-z]*$)(?![0-9]*$)(?![^a-zA-Z0-9]*$)/,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '密码必须由数字、字母、符号至少2种或以上元素!'
						},
						{
							min: 8,
							max: 12,
							message: '长度在8-12个字符之间'
						},
					],
					surePassword: [{
						required: true,
						message: '请输入确认密码',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
				}


			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			submit() {
				console.log(this.form.password, this.form.surePassword)
				if (this.form.password != this.form.surePassword) {
					return uni.showToast({
						icon: 'none',
						title: '密码不一致！'
					})
				}
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.$request.api
							.updatePwd(this.form)
							.then(res => {
								console.log(res)
								if (res.data.status == 200) {
									let value = this.form.surePassword
									let pwdText = '';
									if (/^(?![^a-zA-Z]+$)(?!\D+$)/.test(value) && value.length > 9) {
										pwdText = "中"
									} else if (
										/^(?=.*\d)(?=.*[a-zA-Z])(?=.*[~!@.#$%^&*])[\da-zA-Z~!@#.$%^&*]{8,}$/
										.test(value)) {
										pwdText = "强"
									} else {
										pwdText = "弱"
									}
									uni.setStorageSync('pwdText', pwdText)
									uni.hideLoading();


									uni.showToast({
										title: '修改成功',
										duration: 2000,
										icon: 'none'
									});
									setTimeout(() => {
										uni.navigateBack({
											delta: 1
										})
									}, 500)






								} else {
									uni.hideLoading();
									uni.showToast({
										title: res.data.msg,
										duration: 2000,
										icon: 'none'
									});
									return;
								}
							});

					} else {
						console.log('验证失败');
						uni.showToast({
							icon: 'none',
							title: '请输入密码！'
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.page {
		margin-top: 11rpx;
		background-color: #FFFFFF;
		width: 100vw;
		height: 100vh;

		.from {
			margin: 0rpx 70rpx 0rpx 70rpx;
			padding: 80rpx 0rpx 0rpx 0rpx;
			font-size: 30rpx;
			font-weight: 400;
			color: #333333;
			border-bottom: 2rpx solid #999999;

			.code {
				font-size: 34rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #1677FF;
			}
		}

		.from:last-child {
			padding-top: 59rpx;
		}

		.pwd-cont {
			margin: 36rpx 70rpx 80rpx 70rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			line-height: 33rpx;
		}

		.button-big {
			display: flex;
			text-align: center;
			justify-content: center;

			.button {
				width: 702rpx;
				height: 98rpx;
				// background: #578EF0;
				background: linear-gradient(rgb(118, 217, 4) 0%, rgb(65, 117, 5) 100%);
				box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(87, 142, 240, 0.4);
				border-radius: 49rpx;
				color: #FFFFFF;
				font-weight: 500;
				font-size: 36rpx;
				line-height: 98rpx;
			}
		}
	}
</style>